<template>
    <n-flex justify="center">
        <n-form label-placement="left" :label-width="200">
            <FormItemComponent v-for="(i, index) in portfolio_form.init_investment" :key="i.id" title="成分股及仓位占比："
                tips="设置初始资金">
                <div class="flex w-120">
                    <n-select filterable placeholder="选择股票" v-model:value="i.stock_id" :options="options.stock_list" />
                    <n-input placeholder="请输入投资者占比..." v-model:value="i.value" class=" mx-2">

                        <template #suffix>
                            %
                        </template>
                    </n-input>
                    <n-button @click="deleteInitInvestmentItem(index)" class="ml-2">删除</n-button>
                </div>
                <n-button @click="addInitInvestmentItem" v-if="index + 1 == portfolio_form.init_investment.length"
                    type="primary" class="ml-2">添加</n-button>
            </FormItemComponent>

            <FormItemComponent title="回测日期区间：" tips="设置初始资金">
                <n-date-picker v-model:value="portfolio_form.date_range" type="daterange" clearable />
            </FormItemComponent>
        </n-form>

    </n-flex>


</template>

<script setup>
import FormItemComponent from '@/components/FormItemComponent.vue';
import { h, ref, watch, reactive, onMounted } from "vue";
import { NButton } from "naive-ui";
import { useStockStore } from '@/stores/stockStore';
const props = defineProps(["portfolio_form"]);
const portfolio_form = props.portfolio_form
const stockStore = useStockStore();
const options = ref({
    stock_list: []
})

onMounted(async () => {
    await stockStore.getStockList();
    for (let i of stockStore.stock_list) {
        options.value.stock_list.push({
            label: i.name,
            value: i.id
        })
    }
})

const addInitInvestmentItem = () => {
    portfolio_form.init_investment.push({
        stock_id: '请选择..',
        value: null
    })
}
const deleteInitInvestmentItem = (index) => {
    portfolio_form.init_investment.splice(index, 1)
}
</script>